<template>
	<div class="music-player">
		<div class="shadow"></div>
		<div class="music-wraper">
			<router-link to='/player'>
				<div @click="ToPlayPage" class="singe-info">
					<div class="player-icon"><img :src="getSongInfo.pic_radio"></div>
					<div class="music-name-author">
						<p class="title">{{getSongInfo.title}}</p>
						<p class="player">{{getSongInfo.author}}</p>
					</div>
				</div>
		   </router-link>
			<div class="player-button"><audio autoplay :src="getSongSrc" id="audioPlay"></audio><img src="../assets/icon-playbiaoqian.png" @click="StopAndStart"></div>
			<div class="music-list"><img src="../assets/icon-manage.png"></div>
		</div>	
	</div>
</template>
<script>
	export default{
		name:"musicPlayer",
		data(){
			return{
				
			}
		},
		methods:{
			ToPlayPage(){
				
			},
			StopAndStart(){
				var audio = document.getElementById('audioPlay');
				var currentTime = parseInt(audio.currentTime);
				this.$store.dispatch('getCurrentTime',currentTime);
				if(audio.paused){
					audio.play();
					this.$store.dispatch('getStopOrStart',true);
					console.log(this.$store.getters.getStopOrStart);
					return
				}
				audio.pause();
				this.$store.dispatch('getStopOrStart',false);
				console.log(this.$store.getters.getStopOrStart);
			}
		},
		created(){
			// this.$store.dispatch('getSongSrc','')
			// var audio = document.getElementById('audioPlay');
			// audio.startTime = this.$store.getters.getCurrentTime;
			// console.log(audio);
			// console.log(this.$store.getters.getStopOrStart);
			// if(this.$store.getters.getStopOrStart){
				// console.log("播放");
				// audio.play();
			// }
			// else{
				// audio.pause();
				// console.log("暂停");
			// }
		},
		computed:{
			getSongSrc(){
				return this.$store.getters.getSongSrc
			},
			getSongInfo(){
				return this.$store.getters.getSongInfo
			}
		}
	}
</script>
<style scoped lang="less">
.music-player{
	position: fixed;
	bottom: 0;
	left:0;
	right: 0;
	background-color: #fff;
	z-index: 33;
}
.music-wraper{
	width: 710/100rem;
	margin: 0 auto;
	height: 98 / 100rem;
	position: relative;
}
.music-wraper>div{
	float: left;
}
.shadow{
	width: 100%;
	height: 10 / 100rem;
	background-color: #000;
	opacity: 0.1;
}
.player-icon{
	width: 80/100rem;
	height: 80 / 100rem;
	margin-top: 10/100rem;
	margin-bottom: 8/100rem;
}
.player-icon img{
	width: 100%;
}
.singe-info{
	overflow: hidden;
	width: 537 / 100rem;
}
.singe-info>div{
	float: left;
}
.music-name-author{
	margin-left: 15/100rem;
	// width: 445 / 100rem;
}
.music-name-author .title{
	margin-top: 20/100rem;
	margin-bottom: 10/100rem;
	font-size: 24/100rem;
}
.music-name-author .player{
	margin-bottom: 21/100rem;
	// transform:scale(0.8);
	*-webkit-text-size-adjust: none;
	font-size: 18/100rem;
	color: #666;
}
.player-button{
	width: 60/100rem;
	height: 60/100rem;
	position: absolute;
	right: (173-60)/100rem;
	top: 21/100rem;
}
.player-button img{
	width: 100%;
	height: 100%;
}
.music-list{
	width: 45/100rem;
	height: 30/100rem;
	position: absolute;
	right: 20/100rem;
	top:36/100rem;
}
.music-list img{
	width: 100%;
	height: 100%;
}
</style>